<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" >
			身高：<input type="number" v-model="h"> m <br>
			体重：<input type="number" v-model="w"> kg <br>
			<hr>
			BMI指数：{{w/h*h}} <br>
			方法：{{getBmi()}} <br>
			计算属性：{{bmi}}
			<br>
			<!--  -->
			<hr>
			单价：<input type="number" v-model="price"><br>
			数量：<input type="number" v-model="count"><br>
			总价：{{total}}
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						h:1.6,
						w:60,
						text:'hello vue',
						price:10,
						count:5
					}
				},
				computed:{
					bmi(){//计算属性 缓存  返回值
						console.log('这是计算属性')
						return(this.w/(this.h*this.h)).toFixed(2)
					},
					total(){
						return(this.price*this.count).toFixed(2)
					}
				},
				methods:{
					getBmi(){//方法 没有缓存
						console.log('这是方法')
						return(this.w/(this.h*this.h)).toFixed(2)
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>